<template>
  <el-container class="main">
    <el-main>
      <EditorMain :on-parent-return-to-back="onReturnToBack">
        <div style="width: 95%; margin: 20px auto 0" v-if="detail">
          <el-row :gutter="20">
            <el-col :span="13">
              <Swiper v-if="detail" :detail="detail" />
            </el-col>
            <el-col :span="11">
              <div style="margin-top: 30px">
                <span class="tab-text"
                  >{{ $t("shoppingCartOrder.resourceName") }} :
                </span>
                <span class="tab-text">{{ showCultureResName }}</span>
              </div>
              <div style="margin-top: 15px; display: flex; align-items: center">
                <img src="../../assets/images/a.png" alt="" />
                <span class="tab-text-one" style="margin-left: 5px"
                  >{{ $t("common.supplier") }} :
                  {{ detail.belong | belongFilters }}</span
                >
                <span
                  class="tab-text-one tab-text-author"
                  @click="showSearch(detail.author)"
                  >{{ detail.author }}</span
                >
              </div>

              <div
                style="
                  text-align: left;
                  font-size: 18px;
                  color: #999999;
                  margin-top: 5px;
                  word-break: break-all;
                "
              >
                No：{{ detail.resourceNo }}
              </div>
              <div
                style="
                  margin-top: 20px;
                  font-size: 29px;
                  color: #333333;
                  font-weight: bold;
                "
              >
                {{ $t("resource.desc") }}
              </div>
              <div
                style="margin-top: 20px; margin-bottom: 20px; font-size: 17px"
              >
                {{ detail.resourceDesc }}
              </div>
              <div class="res-buy-tab">
                <div></div>
              </div>

              <BasePunch
                :price="parseInt(detail.priceRange)"
                :price-info="priceInfo"
                :parent-method="onAddShopCart"
                :has-punched="detail.remainUseTimes !== 0"
                :can-add-cart="showAddCart"
                :belong="belong"
              />

              <div
                class="tab-icon-last"
                style="height: 241px; margin-top: 25px"
              >
                <canvas
                  ref="qrCode"
                  style="
                    width: 150px;
                    height: 150px;
                    margin: 15px auto 0;
                    display: block;
                  "
                ></canvas>
                <span style="font-size: 25px; margin-top: 10px">{{
                  $t("resource.qrDesc")
                }}</span>
                <span style="font-size: 15px; margin-top: 5px">{{
                  $t("resource.qrDescFooter")
                }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </EditorMain>
    </el-main>
    <search-slot></search-slot>
  </el-container>
</template>

<script>
import BtnGroup from "../../components/ButtonGroup";
import EditorMain from "../../components/EditorMain";
import BasePunch from "../../components/res-detail/BasePunch";
import Swiper from "../../components/res-detail/SwiperDesc";
import BASE_ENUM from "../../enum/base";
import SearchSlot from "../../components/res-detail/SearchSlot";

import encryption from "../../common/encryption";
import QrCode from "qrcode";
import ajax from "../../common/ajax";
import api from "../../common/api";
import util from "../../common/util";
import bus from "../../assets/eventBus";
import { Container } from "element-ui";

// 资源ID
let resId;
// 用户ID
let userId;
// 语言
let language;
// 出版社ID
let pressId;
// 资源分类ID
let classifyId;
let detailContext;
let resourceNo;

export default {
  filters: {
    belongFilters(belong) {
      const belongMap = {
        1: "平台资源",
        3: "MXR资源",
      };
      return belongMap[belong];
    },
  },
  name: "ResDetail",
  components: {
    BtnGroup,
    EditorMain,
    BasePunch,
    Swiper,
    SearchSlot,
  },
  data() {
    return {
      // 资源详情
      detail: null,
      // 资源来源
      belong: 2,
      // 操作结果信息
      msg: "添加成功",
      // 操作结果ICON
      resultIcon: "resources/images/ico_success.png",
      // 展示TIPS标记
      tips: true,
      // 是否为基本规格标记
      isResBaseTab: true,
      // 价格信息
      priceInfo: null,
      pid: 0,
      shoeText: true,
    };
  },
  created() {
    initQueryData(this);
    getResInfo(this);
  },
  updated() {
    createQrCode(this);
  },
  mounted() {
    new QWebChannel(qt.webChannelTransport, function (channel) {
      detailContext = channel.objects.JSSendMessage;
    });
  },
  computed: {
    showText() {
      if (this.customizeType === 1 && this.isShowCustom) {
        return false;
      } else {
        return true;
      }
    },
    /**
     * 初始化图标
     */
    onShowRightIcom() {
      if (this.detail == null || this.detail.supType == null) {
        return;
      }
      let type = this.detail.supType[0];
      return util.returnResSupTypeIcon(type);
    },

    /**
     * 是否显示模型二维码 ,1=显示，其他不显示
     */
    isShowQrCode() {
      return this.detail.qrcodeStatus === 1;
    },

    /**
     * 是否显示自定义模型
     */
    isShowCustom() {
      // return util.is3DModel(this.detail.supType[0]);
    },

    /**
     * 根据环境显示资源名称
     */
    showCultureResName() {
      return this.detail.resourceName;
    },

    /**
     * 是否可以添加到购物车
     */
    showAddCart() {
      return parseInt(this.belong) === 1 || parseInt(this.belong) === 3;
    },
  },
  methods: {
    imgdragstart(e) {
      e.preventDefault();
    },

    onReturnToBack(i, t) {
      console.log(i, t);
      detailContext.useFunction_BackToPersonalCenter(i, t);
    },
    showSearch(i) {
      bus.$emit("showMxr", i);
    },
    /**
     * 添加到购物车
     *
     * @param data 购物信息
     */
    onAddShopCart(data) {
      console.log(data);
      createShopCartData(this, data);
      let date = new Date().getTime();
      // 判断是不是基本规格，进行不同接口的请求
      let url =
        api.resource.privateRouteName +
        api.resource.children.addShopping +
        "?t=" +
        date;

      if (!data.isBasePunch) {
        url =
          api.resource.privateRouteName +
          api.resource.children.addShopping +
          "?t=" +
          date;
      }

      postShopCart(url, this, data);
    },
  },
};

/**
 * 初始化URL中的参数值
 *
 * @param that VUE对象
 */
function initQueryData(that) {
  resId = that.$route.query.id;
  userId = that.$route.query.userId;
  resourceNo = that.$route.query.resourceNo;
  that.belong = that.$route.query.belong;
}

/**
 * 获取资源详情
 *
 * @param that VUE对象
 */
function getResInfo(that) {
  ajax.get({
    url: api.resource.privateRouteName + api.resource.children.detail,
    data: {
      userId: userId,
      resourceNo: resourceNo,
    },
    success(res) {
      encryption.decryptionMxr(res);
      this.response = JSON.parse(encryption.decryptionMxr(res));
      let str = this.response.resourceIcon;
      console.log(this.response);
      that.scanUrl = this.response.scanUrl;
      if (str.lastIndexOf(",") == str.length - 1) {
        this.response.resourceIcon = str.substring(0, str.length - 1);
      }
      that.detail = {
        ...this.response,
        resourceIcon: this.response.resourceIcon.split(","),
      };
      console.log(that.detail)
      that.priceInfo = that.detail.price;
    },
    error(res) {},
  });
}

/**
 * 初始化二维码
 *
 * @param that VUE对象
 */
function createQrCode(that) {
  QrCode.toCanvas(that.$refs.qrCode, that.scanUrl, {
    width: 150,
    margin: 0,
  });
}

/**
 * 创建购物车购物信息
 *
 * @param that VUE对象
 * @param data 购物信息对象
 */
function createShopCartData(that, data) {
  data.resourceIcon = that.detail.resourceIcon[0];
  data.resourceName = that.detail.resourceName;
  data.resDetailNo = that.detail.resourceNo;
  data.userId = userId;
  data.resourceType = that.detail.resourceType;
}

/**
 * 提交购物数据
 *
 * @param url 请求地址
 * @param that VUE对象
 * @param data 数据对象
 */
function postShopCart(url, that, data) {
  ajax.post({
    url: url,
    data: data,
    success(res) {
      that.$message({
        message: that.$t("resource.buySuccess"),
        type: "success",
      });
      that.$store.dispatch("cartShop/saveData", userId);
    },
    fail(res) {
      that.$message.error(that.$t("resource.buyError"));
    },
  });
}
</script>

<style scoped>
.main {
  min-height: 100%;
  width: 100%;
  background: #eff3f5;
}

.tab-text {
  width: 446px;
  font-size: 29.73px;
  font-weight: bold;
  text-align: left;
  line-height: 59.46px;
  margin-top: 50px;
}

.res-icon {
  width: 40px;
  height: 40px;
}

.el-radio {
  display: flex;
  align-items: center;
}

.tab-text-one {
  font-size: 25px;
  color: #999999;
  text-align: left;
  line-height: 29.73px;
}

.res-buy-tab {
  width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tab-btn {
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #d8d8d8;
  border-radius: 4px 4px 0 0;
  font-size: 21px;
  color: #333333;
  cursor: pointer;
  display: inline-block;
}

.tab-btn-selected {
  background: #4381e6;
  color: #ffffff;
}

.tab-icon-last {
  height: 347px;
  border: 1px solid #dedede;
  border-radius: 9.91px;
  display: block;
  margin-bottom: 50px;
}

.tab-icon-last span {
  display: block;
  width: 100%;
  text-align: center;
  color: #4a4a4a;
}

.tab-icon-mid-text-two {
  font-size: 23.78px;
  color: #007cff;
  border: 1px solid #007cff;
  margin-left: 13px;
  border-radius: 24px;
  width: 24.8px;
  height: 24.8px;
  line-height: 24px;
  text-align: center;
}

.introduction-word {
  background: #ffffff;
  border: 1px solid #979797;
  border-radius: 4px;
  font-size: 16px;
  color: #999999;
  width: 320px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  position: absolute;
}

.tab-text-author:hover {
  cursor: pointer;
}
</style>
